<template>
  <div class="content">
    <div class="data-picker" v-if="!paramsType">
      <div>
        <picker
          class="proportionClass"
          @change="proportionChange"
          :range="swiperList"
          range-key="label"
          :value="pickerIndex"
        >
          <div class="icon-box">
            <span>营收数据</span>
            <img
              class="icon-svg"
              src="https://akk.028wkf.cn/kdb-weapp-img/icon/enterinto.svg"
              mode="scaleToFill"
            />
          </div>
        </picker>
        <div class="icon">
          <!-- <i-icon type="enterinto" size="30" color="#000" /> -->
        </div>
      </div>
      <img
        v-if="orderType === 'rebateAmount'"
        class="right"
        src="https://akk.028wkf.cn/kdb-weapp-img/data-img/data-icon.png"
        mode="scaleToFill"
        @click="selectTypeClick"
      />
    </div>
    <div class="data-show" v-else>
      <div v-for="(item,index) in separatelyShowList" :key="index">
        <div v-if="item.isShow">
          <div class="left">
            <span>{{item.value}}</span>
            <p>{{item.value2}}</p>
          </div>
          <img
            v-if="orderType === 'rebateAmount'"
            class="right"
            src="https://akk.028wkf.cn/kdb-weapp-img/data-img/data-icon.png"
            mode="scaleToFill"
            @click="selectTypeClick"
          />
        </div>
      </div>
    </div>
    <!-- <div class="showDataType">
      <div
        v-for="(item,index) in showDataTypeList"
        :key="index"
        :class="item.isClick ? 'isClick' : ''"
        @click="showDataTypeClick(item)"
      >
        <div class="top">
          <img :src="item.src" />
          <span>{{item.name}}</span>
        </div>
        <p v-if="item.isMoney">￥{{dynamicDataInfo[item.key]}}</p>
        <p v-else>{{dynamicDataInfo[item.key]}}</p>
      </div>
    </div>-->

    <div class="chart-wrap">
      <mpvue-echarts
        :echarts="echarts"
        ref="echarts"
        :on-init="initChart"
        throttle-touch
        lazyLoad
      />
      <div class="show-info" v-if="!paramsType">
        <div
          v-for="(item,index) in separatelyShowList"
          :key="index"
          v-show="item.isShow2"
        >
          <p>{{item.title1}}</p>
          <span>{{item.val1}}</span>
          <p>{{item.title2}}</p>
          <span>{{item.val2}}</span>
        </div>
      </div>
      <p class="data-type">单位：{{unit === 'day' ? '日' : '月'}}</p>
      <div class="echarts-type">
        <div class="left">单位：{{orderType === 'orderNum' ? '笔' : '元'}}</div>
        <div class="right">
          <p></p>
          <span>{{pickerShow}}</span>
        </div>
      </div>
    </div>
    <div class="showDataDate">
      <div
        v-for="(item,index) in showDataDateList"
        :key="index"
        :class="item.isClick ? 'isClick' : ''"
        @click="showDataDateClick(item)"
      >
        <picker
          v-if="item.state"
          mode="date"
          class="filter-picker"
          @change="handleYearChange"
        >{{item.name}}</picker>
        <span v-else>{{item.name}}</span>
      </div>
    </div>
    <cover-view class="cover-box">
      <i-drawer mode="right" :visible="isDrawerShow" :mask-closable="false">
        <cover-view class="drawer-cont">
          <cover-view class="title">返佣类型</cover-view>
          <cover-view class="list">
            <cover-view
              v-for="(item,index) in rebateTypeList"
              :key="index"
              class="list-cont"
              :class="item.isOn ? 'isOn' : ''"
              @click="rebateTypeClick(item)"
            >{{item.label}}</cover-view>
          </cover-view>
          <button class="btn" @click="isDrawerShow = false">取消</button>
        </cover-view>
      </i-drawer>
    </cover-view>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
// import echarts from 'echarts/dist/diy_echarts'
// import echarts from 'echarts'

import mpvueEcharts from 'mpvue-echarts'
import {
  SHOP_SALES_COUNT_DAY, // 店铺每天订单统计
  SHOP_SALES_COUNT_MONTH, // 订单统计（月）
  COUNT_MONTHLY_REBATE_API_DAY, // 每天返佣统计
  COUNT_MONTHLY_REBATE_API_MONTH, // 返佣统计（月）
  FIND_SHOP_ORDER_PAGE
} from '@/api'
import { dateFormatter, getCurrentPageParams, getMonths } from '@/utils'
import moment from 'moment'

import chartOption from './chart3'
let chart = null

export default {
  components: { mpvueEcharts },
  props: {},
  data () {
    return {
      echarts,
      salesData: [],
      isDay: true,
      monthList: [],
      day: 7, // x显示天数
      unit: 'day',
      dataInfo: {
        orderAmount: 0,
        orderNum: 0,
        rebateAmount: 0
      },
      dataInfoAll: {
        orderAmount: 0,
        orderNum: 0,
        rebateAmount: 0
      },
      dynamicDataInfo: {
        orderAmount: 0,
        orderNum: 0,
        rebateAmount: 0
      },
      form: { orderDateStart: '', orderDateEnd: '' },
      showDataTypeList: [
        {
          name: '销售总额',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/rec_blue.png',
          key: 'orderAmount',
          isClick: true,
          isMoney: true
        },
        {
          name: '订单数量',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/rec_green.png',
          key: 'orderNum',
          isClick: false,
          isMoney: false
        },
        {
          name: '返佣金额',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/rec_yellow.png',
          key: 'rebateAmount',
          isClick: false,
          isMoney: true
        }
      ],
      showDataDateList: [
        {
          name: '近7日',
          key: '7',
          state: false,
          isClick: true
        },
        {
          name: '近15日',
          key: '15',
          state: false,
          isClick: false
        },
        {
          name: '月走势',
          key: '30',
          state: false,
          isClick: false
        },
        {
          name: '自定义时间',
          key: '0',
          state: true,
          isClick: false
        }
      ],
      orderType: 'orderAmount', // 默认是销售总额
      swiperList: [
        {
          label: '销售额',
          key: 'orderAmount'
        },
        {
          label: '订单数',
          key: 'orderNum'
        },
        {
          label: '返佣金额',
          key: 'rebateAmount'
        }
      ],
      pickerIndex: '',
      pickerShow: '',
      paramsType: '',
      rebateType: '',
      isDrawerShow: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    separatelyShowList () {
      return [
        {
          isShow: this.paramsType === 'orderAmount',
          value: `销售额总额：${this.dataInfoAll.orderAmount}`,
          value2: `今日销售额：${this.dataInfo.orderAmount}`,
          title1: '销售额总额',
          val1: this.dataInfoAll.orderAmount,
          title2: '今日销售额',
          val2: this.dataInfo.orderAmount,
          isShow2: this.pickerIndex === '0' || this.pickerIndex === 0
        },
        {
          isShow: this.paramsType === 'orderNum',
          value: `订单总数：${this.dataInfoAll.orderNum}`,
          value2: `今日订单数：${this.dataInfo.orderNum}`,
          title1: '订单总数',
          val1: this.dataInfoAll.orderNum,
          title2: '今日订单数',
          val2: this.dataInfo.orderNum,
          isShow2: this.pickerIndex === '1'
        },
        {
          isShow: this.paramsType === 'rebateAmount',
          // value: `返佣金额：${this.dataInfoAll.rebateAmount}`,
          value: `返佣金额：${this.dataInfo.dataInfoAll}`,
          value2: `今日返佣：${this.dataInfo.rebateAmount}`,
          title1: '返佣金额',
          // val1: this.dataInfoAll.rebateAmount,
          val1: this.dataInfo.dataInfoAll,
          title2: '今日订单数',
          val2: this.dataInfo.orderNum,
          isShow2: this.pickerIndex === '2'
        }
      ]
    },
    rebateTypeList () {
      let list = [
        {
          label: '全部',
          key: '',
          isOn: false
        },
        {
          label: '跨店',
          key: '3',
          isOn: false
        },
        {
          label: '养老金',
          key: '1',
          isOn: false
        },
        {
          label: '养老卡',
          key: '2',
          isOn: false
        },
        {
          label: '全返',
          key: '4',
          isOn: false
        }
      ]
      list.forEach(_ => {
        if (_.key === this.rebateType) {
          _.isOn = true
        }
      })
      return list
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.paramsType = getCurrentPageParams('type')
    if (getCurrentPageParams('type')) {
      this.orderType = getCurrentPageParams('type')
    } else {
      this.orderType = 'orderAmount'
    }
    for (let i = 0; i < this.swiperList.length; i++) {
      if (this.orderType === this.swiperList[i].key) {
        this.pickerIndex = i
        this.pickerShow = this.swiperList[i].label
        if (getCurrentPageParams('type')) {
          wx.setNavigationBarTitle({
            title: `${this.swiperList[i].label}`
          })
        }
      }
    }
    this.rebateType = ''
    this.init()
    this.initRequest()
  },
  methods: {
    getMonthBetween (start, end) {
      // 传入的格式YYYY-MM
      var result = []
      var s = start.split('-')
      var e = end.split('-')
      var min = new Date()
      var max = new Date()
      min.setFullYear(s[0], s[1] * 1 - 1, 1) // 开始日期
      max.setFullYear(e[0], e[1] * 1 - 1, 1) // 结束日期
      var curr = min
      // eslint-disable-next-line no-unmodified-loop-condition
      while (curr <= max) {
        var month = curr.getMonth()
        // var str = curr.getFullYear() + "-" + (month);
        // var s = curr.getFullYear() + "-0";
        // if (str == s) {
        // str = curr.getFullYear() + "-1";
        // }
        result.push(month + 1)
        curr.setMonth(month + 1)
      }
      return result
    },
    proportionChange (e) {
      const vm = this
      vm.pickerIndex = e.target.value
      vm.pickerShow = vm.swiperList[e.target.value].label
      vm.salesData = []
      vm.monthList = []
      vm.showDataTypeList.forEach(_ => {
        _.isClick = false
        if (_.key === vm.swiperList[e.target.value].key) {
          vm.orderType = _.key
          _.isClick = true
          let start = new Date(vm.form.orderDateStart)
          let end = new Date(vm.form.orderDateEnd)
          let time = 3600 * 24 * 1000 * 6
          if (end - start <= time) {
            vm.shopSalesCountDay()
            vm.rebateASalesCountDay()
          } else {
            vm.shopSalesCount()
            vm.rebateASalesCount()
          }
        }
      })
    },
    selectTypeClick () {
      this.isDrawerShow = true
    },
    rebateTypeClick (item) {
      const vm = this
      vm.rebateType = item.key
      let start = new Date(vm.form.orderDateStart)
      let end = new Date(vm.form.orderDateEnd)
      let time = 3600 * 24 * 1000 * 6
      if (end - start <= time) {
        vm.shopSalesCountDay()
        vm.rebateASalesCountDay()
      } else {
        vm.shopSalesCount()
        vm.rebateASalesCount()
      }
      vm.isDrawerShow = false
    },
    showDataTypeClick (item) {
      const vm = this
      vm.salesData = []
      vm.monthList = []
      vm.showDataTypeList.forEach(_ => {
        _.isClick = false
        if (_.key === item.key) {
          vm.orderType = _.key
          _.isClick = true
          let start = new Date(vm.form.orderDateStart)
          let end = new Date(vm.form.orderDateEnd)
          let time = 3600 * 24 * 1000 * 6
          if (end - start <= time) {
            vm.shopSalesCountDay()
            vm.rebateASalesCountDay()
            vm.unit = 'day'
          } else {
            vm.shopSalesCount()
            vm.rebateASalesCount()
            vm.unit = 'month'
          }
        }
      })
    }, // 选类型
    showDataDateClick (item) {
      const vm = this
      vm.salesData = []
      vm.monthList = []
      vm.showDataDateList.forEach(_ => {
        _.isClick = false
        if (_.key === item.key) {
          _.isClick = true
          if (!_.state) {
            let val = item.key
            if (val === '7') {
              let startDate = moment(
                new Date().getTime() - 3600 * 24 * 1000 * 6
              ).format('YYYY-MM-DD')
              vm.form.orderDateStart = startDate
              vm.form.orderDateEnd = dateFormatter('yyyy-MM-dd', new Date())
              vm.shopSalesCountDay()
              vm.rebateASalesCountDay()
              vm.unit = 'day'
              vm.day = Number(val)
            } else if (val === '15') {
              let startDate2 = moment(
                new Date().getTime() - 3600 * 24 * 1000 * 15
              ).format('YYYY-MM-DD') // 后面改成30天了
              let endDate = moment(new Date()).format('YYYY-MM-DD')
              vm.form.orderDateStart = startDate2
              vm.form.orderDateEnd = endDate
              // vm.shopSalesCount()
              // vm.rebateASalesCount()
              vm.shopSalesCountDay()
              vm.rebateASalesCountDay()
              vm.unit = 'day'
              vm.day = Number(val)
            } else if (val === '30') {
              // let startDate = moment(
              //   new Date().getTime() - 3600 * 24 * 1000 * 30
              // ).format('YYYY-MM-DD')
              let startDate = moment(
                new Date().getTime() - 3600 * 24 * 1000 * 365
              ).format('YYYY-MM-DD')
              let endDate = moment(new Date()).format('YYYY-MM-DD')
              vm.form.orderDateStart = startDate
              vm.form.orderDateEnd = endDate
              vm.shopSalesCount()
              vm.rebateASalesCount()
              vm.unit = 'month'
            } else {
              vm.$total('数据有误')
            }
          }
        }
      })
    }, // 选择时间
    handleYearChange (e) {
      const vm = this
      let value = e.target.value
      let time = 16
      let onDay = 3600 * 24 * 1000
      let astrict = 365

      if (
        astrict <
        (new Date(dateFormatter('yyyy-MM-dd', new Date())) - new Date(value)) /
          onDay +
          1
      ) {
        vm.$toast('筛选时间不能大于一年')
        return false
      }

      vm.form.orderDateStart = value
      let start = value

      let end = dateFormatter('yyyy-MM-dd', new Date())
      vm.form.orderDateEnd = end

      let chaDay = (new Date(end) - new Date(start)) / onDay + 1

      if (chaDay < time) {
        vm.shopSalesCountDay()
        vm.rebateASalesCountDay()
        vm.day = chaDay
      } else {
        vm.shopSalesCount('change')
        vm.rebateASalesCount('change')
      }
    },
    init () {
      const vm = this
      vm.showDataDateList.forEach(_ => {
        _.isClick = false
      })
      vm.showDataDateList[0].isClick = true
      vm.unit = 'day'

      vm.form.orderDateStart = moment(
        new Date().getTime() - 3600 * 24 * 1000 * 6
      ).format('YYYY-MM-DD')

      vm.form.orderDateEnd = dateFormatter('yyyy-MM-dd', new Date())
      vm.rebateASalesCountDay()
      vm.shopSalesCountDay()
    },
    shopSalesCountDay () {
      const vm = this
      vm.isDay = true
      let params = {
        ...vm.form,
        state: '3',
        shopId: vm.account.shopId
      }
      params.orderDateStart = `${vm.form.orderDateStart} 00:00:00`
      params.orderDateEnd = `${vm.form.orderDateEnd} 23:59:59`
      SHOP_SALES_COUNT_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            let num = arr.reduce((acc, _) => {
              acc += _.saleNum
              return acc
            }, 0)
            if (arr.length) {
              arr.forEach(_ => {
                if (_.saleAmount) {
                  _.saleAmount = _.saleAmount.toFixed(2)
                }
              })
            }
            vm.dynamicDataInfo.orderAmount = val.toFixed(2)
            vm.dynamicDataInfo.orderNum = num

            if (vm.orderType !== 'rebateAmount') {
              let data = arr
              let dataList = []

              let dayList = new Date(this.form.orderDateEnd).valueOf()
              let newList = Array.from(
                new Array(vm.day),
                (_, i) =>
                  dateFormatter(
                    'dd',
                    new Date(dayList - (vm.day - 1 - i) * (1000 * 60 * 60 * 24))
                  ) * 1
              )
              for (let i = 0; i < newList.length; i++) {
                let obj = {
                  saleAmount: '0',
                  saleNum: 0
                }
                for (let j = 0; j < data.length; j++) {
                  if (
                    newList[i] ===
                    Number(data[j].orderDate.split(' ')[0].split('-')[2])
                  ) {
                    obj.saleAmount = data[j].saleAmount
                    obj.saleNum = data[j].saleNum
                  }
                }
                dataList.push(obj)
              }
              // vm.refreshChart(data.sort((a, b) => a.month - b.month))
              vm.refreshChart(dataList)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 订单统计（天）
    shopSalesCount (value) {
      const vm = this
      vm.isDay = false
      let params = {
        ...vm.form,
        state: '3',
        shopId: vm.account.shopId
      }
      params.orderDateStart = `${vm.form.orderDateStart} 00:00:00`
      params.orderDateEnd = `${vm.form.orderDateEnd} 23:59:59`
      SHOP_SALES_COUNT_MONTH(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            // let count = 1
            let array = []

            let dataArr = []
            let data = new Date()
            data.setMonth(data.getMonth(), 1) // 获取到当前月份,设置月份
            for (let i = 0; i < 12; i++) {
              data.setMonth(data.getMonth() + 1) // 每次循环一次 月份值减1
              let m = data.getMonth() + 1
              // m = m < 10 ? '0' + m : m
              dataArr.push(m)
            }

            let newDataArr = getMonths(
              vm.form.orderDateStart,
              vm.form.orderDateEnd
            )

            if (vm.orderType !== 'rebateAmount') {
              vm.monthList = []
              for (let i = 0; i < newDataArr.length; i++) {
                // for (let i = 1; i < 13; i++) {
                // vm.monthList.push(`${count}月`)
                vm.monthList.push(`${newDataArr[i]}月`)
                array.push({
                  month: newDataArr[i],
                  saleAmount: 0,
                  saleNum: 0
                })
                // count++
              }
            }

            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            let num = arr.reduce((acc, _) => {
              acc += _.saleNum
              return acc
            }, 0)
            if (arr.length) {
              arr.forEach(_ => {
                if (_.saleAmount) {
                  _.saleAmount = _.saleAmount.toFixed(2)
                }
              })
            }
            vm.dynamicDataInfo.orderAmount = val.toFixed(2)
            vm.dynamicDataInfo.orderNum = num

            if (vm.orderType !== 'rebateAmount') {
              let data = arr

              array.forEach(_ => {
                data.forEach(e => {
                  if (_.month === e.month) {
                    _.saleAmount = e.saleAmount
                    _.saleNum = e.saleNum
                  }
                })
              })
              // vm.refreshChart(array.sort((a, b) => a.month - b.month))
              vm.refreshChart(array)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 订单统计（月）
    rebateASalesCountDay () {
      const vm = this
      vm.isDay = true
      let params = {
        ...vm.form,
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1',
        type: vm.rebateType
      }
      params.createDateStart = `${vm.form.orderDateStart} 00:00:00`
      params.createDateEnd = `${vm.form.orderDateEnd} 23:59:59`
      delete params.orderDateStart
      delete params.orderDateEnd
      COUNT_MONTHLY_REBATE_API_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            if (arr.length) {
              arr.forEach(_ => {
                if (_.amount) {
                  _.amount = _.amount.toFixed(2)
                }
              })
            }
            vm.dynamicDataInfo.rebateAmount = val.toFixed(2)
            if (vm.orderType === 'rebateAmount') {
              let data = arr
              let dayList = new Date(this.form.orderDateEnd).valueOf()
              let newList = Array.from(
                new Array(vm.day),
                (_, i) =>
                  dateFormatter(
                    'dd',
                    new Date(dayList - (vm.day - 1 - i) * (1000 * 60 * 60 * 24))
                  ) * 1
              ).map(_ => ({
                day: _
                // amount: 0,
                // point: 0
              }))

              let newList2 = data.map(_ => ({
                ..._,
                day: Number(_.createDate.split(' ')[0].split('-')[2])
              }))
              newList.forEach(_ => {
                newList2.forEach(e => {
                  if (_.day === e.day) {
                    _.amount = (e.amount * 0.01 + e.point * 0.0001).toFixed(2)
                  }
                })
              })

              // vm.refreshChart(data.sort((a, b) => a.month - b.month))
              vm.refreshChart(newList)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额（天）
    rebateASalesCount (value) {
      const vm = this
      vm.isDay = false
      let params = {
        ...vm.form,
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1',
        type: vm.rebateType
      }
      params.createDateStart = `${vm.form.orderDateStart} 00:00:00`
      params.createDateEnd = `${vm.form.orderDateEnd} 23:59:59`
      delete params.orderDateStart
      delete params.orderDateEnd
      COUNT_MONTHLY_REBATE_API_MONTH(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            // let count = 1
            let array = []

            let dataArr = []
            let data = new Date()
            data.setMonth(data.getMonth() - 1, 1)
            for (let i = 0; i < 12; i++) {
              data.setMonth(data.getMonth() + 1)
              let m = data.getMonth() + 1
              dataArr.push(m)
            }

            let newDataArr = getMonths(
              vm.form.orderDateStart,
              vm.form.orderDateEnd
            )

            if (vm.orderType === 'rebateAmount') {
              vm.monthList = []
              for (let i = 0; i < newDataArr.length; i++) {
                vm.monthList.push(`${newDataArr[i]}月`)
                array.push({
                  month: newDataArr[i].toString(),
                  amount: 0
                })
                // count++
              }

              // if (arr.length) {
              //   arr.forEach(_ => {
              //     vm.monthList.push(`${_.month}月`)
              //   })
              // } else {
              //   let count = 1
              //   for (let i = 1; i < 13; i++) {
              //     vm.monthList.push(`${count}月`)
              //     count++
              //   }
              // }
            }

            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            if (arr.length) {
              arr.forEach(_ => {
                if (_.amount || _.point) {
                  _.amount = (_.amount * 0.01 + _.point * 0.0001).toFixed(2)
                }
              })
            }
            vm.dynamicDataInfo.rebateAmount = val.toFixed(2)

            if (vm.orderType === 'rebateAmount') {
              let data = arr

              array.forEach(_ => {
                data.forEach(e => {
                  if (_.month === e.month) {
                    _.amount = e.amount
                  }
                })
              })

              // vm.refreshChart(data.sort((a, b) => a.month - b.month))
              // vm.refreshChart(array.sort((a, b) => a.month - b.month))
              vm.refreshChart(array)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额（月）
    initChart (canvas, width, height) {
      chart = echarts.init(canvas, null, { width, height })
      canvas.setChart(chart)
      let option = chartOption
      let keys = ['saleAmount'] // 默认的
      let name = '单位：元'
      let type = 'bar'
      // let typeName = this.pickerShow
      if (this.orderType === 'orderAmount') {
        name = '单位：元'
        keys = ['saleAmount']
        type = 'line'
      } else if (this.orderType === 'orderNum') {
        name = '单位：笔'
        keys = ['saleNum']
        // type = 'bar'
        type = 'line'
      } else {
        name = '单位：元'
        keys = ['amount']
        type = 'line'
      }
      keys.forEach((key, idx) => {
        option.series[idx].data = this.salesData.map(_ => _[key] || 0)
        // option.yAxis[idx].name = name
        option.yAxis[idx].name = ''
        option.series[idx].name = name
        option.series[idx].type = type
        if (this.orderType === 'rebateAmount') {
          option.series[idx].smooth = true
        } else {
          delete option.series[idx].smooth
        }
      })
      if (this.paramsType) {
        option.xAxis.name = ''
      } else {
        // option.xAxis.name = typeName
        option.xAxis.name = ''
      }

      if (this.isDay) {
        let dayList = new Date(this.form.orderDateEnd).valueOf()
        option.xAxis.data = Array.from(
          new Array(this.day),
          (_, i) =>
            dateFormatter(
              'dd',
              new Date(dayList - (this.day - 1 - i) * (1000 * 60 * 60 * 24))
            ) *
              1 +
            '日'
        )
      } else {
        // option.xAxis.data = Array.from(new Array(12), (_, i) => `${i + 1}月`)
        option.xAxis.data = this.monthList
      }

      chart.setOption(option)
      return chart
    },
    refreshChart (list) {
      this.salesData = list
      this.$refs.echarts.init()
    },

    /** 这个下面是固定了的，今本上不会变得数据 **/
    shopSalesCountDay1 () {
      const vm = this
      let day = dateFormatter('yyyy-MM-dd', new Date())
      let params = {
        shopId: vm.account.shopId,
        state: '3'
      }
      params.orderDateStart = `${day} 00:00:00`
      params.orderDateEnd = `${day} 23:59:59`
      SHOP_SALES_COUNT_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            let num = arr.reduce((acc, _) => {
              acc += _.saleNum
              return acc
            }, 0)
            if (arr.length) {
              arr.forEach(_ => {
                if (_.saleAmount) {
                  _.saleAmount = _.saleAmount.toFixed(2)
                }
              })
            }
            vm.dataInfo.orderAmount = val.toFixed(2)
            vm.dataInfo.orderNum = num
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 订单统计（固定了的每天）
    rebateASalesCountDay1 () {
      const vm = this
      let params = {
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1',
        type: vm.rebateType
      }
      let day = dateFormatter('yyyy-MM-dd', new Date())
      params.createDateStart = `${day} 00:00:00`
      params.createDateEnd = `${day} 23:59:59`
      COUNT_MONTHLY_REBATE_API_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            vm.dataInfo.rebateAmount = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额（固定了的每天）
    shopSalesCountDayAll () {
      const vm = this
      let day = dateFormatter('yyyy-MM-dd', new Date())
      let params = {
        shopId: vm.account.shopId,
        state: '3'
      }
      params.orderDateStart = `1970-01-01 00:00:00`
      params.orderDateEnd = `${day} 23:59:59`
      SHOP_SALES_COUNT_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            // let num = arr.reduce((acc, _) => {
            //   acc += _.saleNum
            //   return acc
            // }, 0)
            // if (arr.length) {
            //   arr.forEach(_ => {
            //     if (_.saleAmount) {
            //       _.saleAmount = _.saleAmount.toFixed(2)
            //     }
            //   })
            // }
            vm.dataInfoAll.orderAmount = val.toFixed(2)
            // vm.dataInfoAll.orderNum = num
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 订单统计
    rebateASalesCountDayAll () {
      const vm = this
      let params = {
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1'
        // type: vm.rebateType
      }
      let day = dateFormatter('yyyy-MM-dd', new Date())
      params.createDateStart = `1970-01-01 00:00:00`
      params.createDateEnd = `${day} 23:59:59`
      COUNT_MONTHLY_REBATE_API_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            vm.dataInfo.dataInfoAll = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额
    shopOrderCount () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        state: '3,7'
      }
      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.dataInfoAll.orderNum = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 订单总数
    initRequest () {
      const vm = this
      vm.shopSalesCountDay1() // 今天订单统计
      vm.rebateASalesCountDay1() // 今天返佣金额
      vm.shopSalesCountDayAll()
      vm.rebateASalesCountDayAll()
      vm.shopOrderCount()
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
@import 'static/styles/global.scss';
.content {
  background: #f2f3f5;
  > .data-picker {
    width: 95%;
    height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      .icon {
        transform: rotate(90deg);
      }
      .icon-box {
        display: flex;
        align-items: center;
        .icon-svg {
          width: 22px;
          height: 22px;
          margin: 0 0 0 5px;
        }
      }
      .proportionClass {
        height: 60px;
        display: flex;
        align-items: center;
      }
    }
    > img {
      width: 23px;
      height: 23px;
    }
  }
  > .data-show {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    > div {
      > div {
        width: 90%;
        margin: auto;
        height: 50px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .left {
          display: flex;
          align-items: center;
          > p {
            font-size: 14px;
            color: #9e9e9e;
            margin-left: 10px;
          }
        }
        > img {
          width: 23px;
          height: 23px;
        }
      }
    }
  }
}
.showDataType {
  width: 100%;
  display: flex;
  > div {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #fff;
    > .top {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #a1a1a1;
      img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
    }
    p {
      margin-bottom: 10px;
    }
  }
  > .isClick {
    border-bottom: 3px solid #6371fd;
  }
}

.chart-wrap {
  // padding: 0 15px;
  width: 100%;
  height: 300px;
  background: #fff;
  position: relative;
  > .show-info {
    padding: 8px 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8888;
  }
  > .data-type {
    position: absolute;
    bottom: 12px;
    right: 25px;
    font-size: 12px;
    color: #6d6d6d;
  }
  > .echarts-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 22px;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 12px;
    line-height: 12px;
    color: #6d6d6d;
    > .left {
      margin-left: 15px;
    }
    > .right {
      display: flex;
      align-items: center;
      margin-right: 15px;
      > p {
        width: 10px;
        height: 10px;
        background: #9aa3fe;
        border-radius: 50px;
        margin-right: 4px;
      }
    }
  }
}

.showDataDate {
  width: 100%;
  display: flex;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  border-bottom: 6px solid #efefef;
  > div {
    width: 25%;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9c9c9c;
    font-size: 13px;
  }
  > div:nth-child(2) {
    border-left: 1px solid #e6e6e6;
  }
  > div:nth-child(3) {
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
  }
  > .isClick {
    color: $blue;
  }
}
.cover-box {
  // width: 100%;
  // height: 100vh;
  // position: absolute;
  // top: 0;
  // right: 0;
  .drawer-cont {
    width: 100%;
    height: 100vh;
    background: #fff;
    position: relative;
    z-index: 9999;
    .title {
      font-size: 15px;
      width: 100%;
      line-height: 50px;
      border-bottom: 1px solid #f7f7f7;
      text-align: center;
      margin-bottom: 10px;
    }
    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .list-cont {
        width: 40%;
        height: 50px;
        background: #f5f5f5;
        border-radius: 6px;
        line-height: 50px;
        text-align: center;
        margin: 10px;
        font-size: 14px;
      }
      .isOn {
        background: $new-dark-blue;
        color: #fff;
      }
    }
    .btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      font-size: 15px;
      line-height: 50px;
      border: 0;
      border-top: 1px solid #f5f5f5;
    }
  }
}
</style>
